<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签数量统计测试</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .test-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .test-section {
            margin: 40px 0;
            padding: 30px;
            background: var(--bg-glass);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .log-container {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: var(--radius-md);
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            max-height: 300px;
            overflow-y: auto;
            margin: 15px 0;
        }
        .test-button {
            padding: 10px 20px;
            background: var(--ilovefree-blue);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            margin: 10px;
            transition: all 0.3s ease;
        }
        .test-button:hover {
            background: var(--ilovefree-accent);
            transform: translateY(-2px);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .stat-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: var(--radius-md);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--ilovefree-blue);
            margin-bottom: 10px;
        }
        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1 style="text-align: center; color: var(--text-primary); margin-bottom: 40px;">
            🏷️ 标签数量统计功能测试
        </h1>

        <div class="test-section">
            <h2>📊 实时统计数据</h2>
            <div class="stats-grid" id="stats-grid">
                <!-- 统计数据将在这里动态生成 -->
            
        

        <div class="test-section">
            <h2>🧪 分类：免版权图库 & 免扣素材</h2>
            <div class="tags-container" id="tuku">
                <span class="tag-label">筛选：</span>
                <button class="tag-btn active" data-tag-id="1" data-tag-filter="推荐" onclick="filterByTag('tuku', 1)">
                    推荐
                    <span class="tag-count">0</span>
                </button>
                <button class="tag-btn" data-tag-id="2" data-tag-filter="综合" onclick="filterByTag('tuku', 2)">
                    综合
                    <span class="tag-count">0</span>
                </button>
                <button class="tag-btn" data-tag-id="3" data-tag-filter="风景" onclick="filterByTag('tuku', 3)">
                    风景
                    <span class="tag-count">0</span>
                </button>
                <button class="tag-btn" data-tag-id="4" data-tag-filter="人物" onclick="filterByTag('tuku', 4)">
                    人物
                    <span class="tag-count">0</span>
                </button>
                <button class="tag-btn" data-tag-id="5" data-tag-filter="美食" onclick="filterByTag('tuku', 5)">
                    美食
                    <span class="tag-count">0</span>
                </button>
                <button class="tag-btn" data-tag-id="6" data-tag-filter="艺术" onclick="filterByTag('tuku', 6)">
                    艺术
                    <span class="tag-count">0</span>
                </button>
                <button class="tag-btn" data-tag-id="7" data-tag-filter="免扣" onclick="filterByTag('tuku', 7)">
                    免扣
                    <span class="tag-count">0</span>
                </button>
            

            <div class="nav-grid" data-category="tuku" id="tuku-cards">
                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/pixabay/200/120.jpg" alt="Pixabay" loading="lazy">
                            <h4>Pixabay</h4>
                            <p>全球最大的免费图片站，超50万张图，支持中文搜索</p>
                            <div class="nav-badge">推荐
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/unsplash/200/120.jpg" alt="Unsplash" loading="lazy">
                            <h4>Unsplash</h4>
                            <p>海量图库，分类超全，精选挑选整理了各种专题</p>
                            <div class="nav-badge">热门
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/sitapix/200/120.jpg" alt="西田图像" loading="lazy">
                            <h4>西田图像</h4>
                            <p>200000+高质量免版权图片素材/设计师素材/摄影图片</p>
                            <div class="nav-badge">优质
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/magdeleine/200/120.jpg" alt="Magdeleine" loading="lazy">
                            <h4>Magdeleine</h4>
                            <p>支持色彩选图，有许多高质量的黑白图片</p>
                            <div class="nav-badge">特色
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,艺术">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/polayoutu/200/120.jpg" alt="泼辣有图" loading="lazy">
                            <h4>泼辣有图</h4>
                            <p>泼辣熊发起的开源摄影项目，质量超高！</p>
                            <div class="nav-badge">开源
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/colorhub/200/120.jpg" alt="colorhub" loading="lazy">
                            <h4>colorhub</h4>
                            <p>已收录91726张高清图片，质量很高，而且每天都在不断更新</p>
                            <div class="nav-badge">更新
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/nasa/200/120.jpg" alt="NASA Image" loading="lazy">
                            <h4>NASA Image</h4>
                            <p>美国国家航天局的官方库，浩瀚宇宙,均可免费下载使用</p>
                            <div class="nav-badge">官方
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,美食">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/foodiesfeed/200/120.jpg" alt="FoodiesFeed" loading="lazy">
                            <h4>FoodiesFeed</h4>
                            <p>顾名思义，主打食品，吃货设计师的天堂</p>
                            <div class="nav-badge">专业
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,人物,风景">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/pakutaso/200/120.jpg" alt="PAKUTASO" loading="lazy">
                            <h4>PAKUTASO</h4>
                            <p>日本免费商用图库，主题丰富，还有写真素材</p>
                            <div class="nav-badge">日系
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/hippopx/200/120.jpg" alt="hippopx" loading="lazy">
                            <h4>hippopx</h4>
                            <p>收录超过20万张以上的免费CC0授权相片，支持中文检索</p>
                            <div class="nav-badge">CC0
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,免扣">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/pngimg/200/120.jpg" alt="Pngimg" loading="lazy">
                            <h4>Pngimg</h4>
                            <p>提供了海量的高质量PNG图片，均可免费下载使用</p>
                            <div class="nav-badge">PNG
                        
                    </a>
                

                <div class="nav-card" data-tag-filters="推荐,综合,风景,人物">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/burst/200/120.jpg" alt="burst" loading="lazy">
                            <h4>burst</h4>
                            <p>提供免费可商用的图片下载，都是精心挑选过的</p>
                            <div class="nav-badge">精选
                        
                    </a>
                
            
        

        <div class="test-section">
            <h2>🔧 测试控制</h2>
            <button class="test-button" onclick="testAllTags()">测试所有标签</button>
            <button class="test-button" onclick="showSystemInfo()">显示系统信息</button>
            <button class="test-button" onclick="refreshCounts()">刷新计数</button>

            <div class="log-container" id="log-container">
                日志将在这里显示...
            
        
    

    <!-- JavaScript 脚本 -->
    <script src="assets/js/ilovefree-migration.js"></script>
    <script>
        let testLogs = [];

        function log(message) {
            console.log(message);
            testLogs.push(`[${new Date().toLocaleTimeString()}] ${message}`);
            updateLogDisplay();
        }

        function updateLogDisplay() {
            const logContainer = document.getElementById('log-container');
            if (logContainer) {
                logContainer.innerHTML = testLogs.slice(-20).join('<br>');
                logContainer.scrollTop = logContainer.scrollHeight;
            }
        }

        function updateStats() {
            if (!window.ilovefreeMigration) {
                log('❌ 迁移系统未初始化');
                return;
            }

            const categories = window.ilovefreeMigration.categories;
            const statsGrid = document.getElementById('stats-grid');

            if (!statsGrid) return;

            let html = '';

            Object.keys(categories).forEach(categoryId => {
                const category = categories[categoryId];
                html += `
                    <div class="stat-card">
                        <div class="stat-number">${category.cards.length}
                        <div class="stat-label">${categoryId} 总卡片数
                    
                `;
            });

            // 添加标签统计
            const tukuCategory = categories['tuku'];
            if (tukuCategory) {
                Object.keys(tukuCategory.tagCounts).forEach(tag => {
                    html += `
                        <div class="stat-card">
                            <div class="stat-number">${tukuCategory.tagCounts[tag]}
                            <div class="stat-label">标签 "${tag}"
                        
                    `;
                });
            }

            statsGrid.innerHTML = html;
            log('📊 统计数据已更新');
        }

        function testAllTags() {
            if (!window.ilovefreeMigration) {
                log('❌ 迁移系统未初始化');
                return;
            }

            log('🧪 开始测试所有标签...');

            const tags = document.querySelectorAll('#tuku .tag-btn');
            let delay = 0;

            tags.forEach((btn, index) => {
                setTimeout(() => {
                    btn.click();
                    const tagId = btn.getAttribute('data-tag-id');
                    const tagFilter = btn.getAttribute('data-tag-filter');
                    const count = btn.querySelector('.tag-count').textContent;
                    log(`✅ 测试标签 ${index + 1}: ${tagFilter} -> ${count} 个结果`);
                }, delay);
                delay += 1000;
            });

            setTimeout(() => {
                log('🏁 所有标签测试完成');
                updateStats();
            }, delay + 1000);
        }

        function showSystemInfo() {
            if (!window.ilovefreeMigration) {
                log('❌ 迁移系统未初始化');
                return;
            }

            const categories = window.ilovefreeMigration.categories;
            const selectedTags = window.ilovefreeMigration.selectedTags;

            log('📋 系统信息:');
            log(`- 已加载分类: ${Object.keys(categories).length} 个`);
            log(`- 当前选择: ${JSON.stringify(selectedTags)}`);

            Object.keys(categories).forEach(categoryId => {
                const category = categories[categoryId];
                log(`- ${categoryId}: ${category.cards.length} 个卡片, ${Object.keys(category.tagCounts).length} 个标签`);
            });
        }

        function refreshCounts() {
            if (!window.ilovefreeMigration) {
                log('❌ 迁移系统未初始化');
                return;
            }

            Object.keys(window.ilovefreeMigration.categories).forEach(categoryId => {
                window.ilovefreeMigration.updateTagCounts(categoryId);
            });

            log('🔄 标签数量已刷新');
            updateStats();
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                log('🎯 开始初始化测试页面...');

                if (window.ilovefreeMigration) {
                    log('✅ 迁移系统已加载');

                    // 等待系统完全初始化
                    setTimeout(() => {
                        updateStats();
                        log('🎉 测试页面初始化完成');
                    }, 2000);
                } else {
                    log('❌ 迁移系统未找到');
                }
            }, 1000);
        });

        // 监听迁移系统的日志
        const originalConsoleLog = console.log;
        console.log = function(...args) {
            originalConsoleLog.apply(console, args);
            if (args[0] && typeof args[0] === 'string' && args[0].includes('🏷️')) {
                log(args.join(' '));
            }
        };
    </script>
</body>
</html>